<template>
  <view class="compare_item" @click="handleItemClick">
    <view class="compare_item_top">
      <view class="top_l name_box">
        <view class="inner">
          <view class="lable">姓名:</view>
          <view class="name">{{ item.currentName }}</view>
          <template v-if="item.currentScore">
            <view class="lable">总分:</view>
            <view class="value">{{ item.currentScore }}</view>
          </template>
        </view>
      </view>
      <view class="top_m"></view>
      <view class="top_r name_box">
        <view class="inner">
          <view class="lable">姓名:</view>
          <view class="name">{{ item.comparativeName }}</view>
          <template v-if="item.comparativeScore">
            <view class="lable">总分:</view>
            <view class="value">{{ item.comparativeScore }}</view>
          </template>
        </view>
      </view>
    </view>
    <view class="compare_item_bottom">对比时间：{{ item.comparativeDate || '' }}</view>
  </view>
</template>

<script>
// import dayjs from 'dayjs'
export default {
  name: 'appCompareItem',
  // components: {},
  props: {
    item: Object
  },
  data() {
    return {}
  },
  computed: {
    // reportTime() {
    //   return this.item.reportTime ? dayjs(this.item.reportTime).format('YYYY/MM/DD') : ''
    // }
  },
  methods: {
    handleItemClick() {
      this.$emit('COMPARE_ITEM_CLICK', this.item)
    }
  }
}
</script>

<style lang="scss">
app-compare-item {
  display: block;
}
app-compare-item ~ app-compare-item {
  margin-top: 30rpx;
}

.compare_item {
  padding: 15rpx 15rpx 24rpx;
  border-radius: 60rpx;

  @include bgStriped($bgColor: #ffff43, $lineColor: #ecec43);

  .compare_item_top {
    display: flex;
    align-items: center;
    position: relative;
  }

  .name_box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50rpx 0;
    border-radius: 50rpx;
    background-color: #ffffca;
    box-shadow: 0px 10rpx 40rpx 0px rgba(0, 0, 0, 0.1);
    @include boxWithDashed(40rpx, #f0bf3b, 10rpx);
  }

  .top_m {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140rpx;
    height: 140rpx;
    background-image: url('#{$BASEURL}/compare_item_icon.png');
    background-size: contain;
    box-shadow: 0px 10rpx 40rpx 0px rgba(0, 0, 0, 0.1);
  }

  .top_r {
    margin-left: 70rpx;
  }

  .inner {
    .label {
      font-size: 30rpx;
    }
    .name {
      font-weight: 600;
      font-size: 60rpx;
    }
    .value {
      font-family: Impact;
      font-weight: 600;
      font-size: 80rpx;
    }
  }

  .compare_item_bottom {
    margin-top: 37rpx;
    text-align: center;
    font-size: 40rpx;
  }
}
</style>
